s<template>
	<div class="user-info">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				个人信息
			</div>
			<div class="right"
				@click="change()"
			>
				<i class="iconfont">&#xe6ad;</i>
			</div>
		</div>
		<div class="ui-content">
			<div class="avatar">
				<img :src="list.avatar" />
				<p class="name"><span>ID:</span>{{list.id}}</p>
				<p class="btn">修改头像</p>
			</div>
			<div class="nickname border-1px">
				<p>昵称</p>
				<input type="text" v-model.trim="nickname">
			</div>
			<div class="nickname border-1px">
				<p>个人签名</p>
				<input type="text" v-model.trim="bio" placeholder="记录此刻的心情">
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				nickname: '',
				bio: '',
				username: '',
				avatar: '',
				list: []
			}
		},
		mounted(){
			this.getWhoami()
		},
		methods: {
			change: function(){
				this.username = this.list.username;
				this.avatar = this.list.avatar;
				this.nickname = this.nickname;
				this.bio = this.bio; 
				var params = new URLSearchParams();
				params.append('avatar',this.avatar);
				params.append('username',this.username);
				params.append('nickname',this.nickname);
				params.append('bio',this.bio);
				axios.post(Http.EDITUSERINFO,params)
				.then( res => {
					const ret =res.data;
					if (ret.code == 1) {
						Toast(ret.msg)
					}
				})
			},
			getWhoami(){
				let params = {
                    sort: 'updated'
                }
				axios.post(Http.USERIDEX,params)
				.then( res => {
					const ret =res.data;
					this.list = ret['data'];
					this.nickname = this.list.nickname;
					this.bio = this.list.bio;
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-info{
		.ui-content{
			.avatar{
				position: relative;
				display: flex;
				align-items: center;
				border-bottom: 0.2rem solid #f1f1f7;
				padding: 0.24rem;
				img{
					margin-right: 0.4rem;
					width: 1.2rem;
					height: 1.2rem;
					border-radius: 1.2rem;
				}
				.name{
					font-size: 0.28rem;
					span{
						font-weight: bold;
					}
				}
				.btn{
					position: absolute;
					right: 0.24rem;
					margin-left: 20%;
					padding: 0 0.4rem;
					height: 0.8rem;
					line-height: 0.8rem;
					border-radius: 0.8rem;
					border: 0.01rem solid #DCDFE6;
				}
			}
			.nickname{
				display: flex;
				align-items: center;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.28rem;
				p{
					margin-left: 0.24rem;
					flex: 0 0 20%;
					text-align: left;
				}
				input{
					flex: 1;
					height: 100%;
				}
			}
		}
		
	}
</style>